<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS ajax</title>
</head>
<body>
    <form id="login">
        <h1>登录界面</h1>
        用户名称：<input type="text" name="username" required placeholder="请输入昵称" /><br />
        密码：<input type="password" name="password" required placeholder="请输入密码" /><br />
        <button type="submit">登录</button>
    </form>
</body>
</html>
<!-- 引入jquery -->
<script src="./jquery-3.2.1.min.js"></script>
<script>
    //给表单绑定 提交事件
    $('#login').submit(function(e){
        //表单元素自带提交功能，阻止元素的默认功能
        e.preventDefault()

        //获取表单元素
        var username = $.trim($("input[name=username]").val())

        if(username.length <= 0)
        {
            alert('请输入用户名')
            return false
        }

        //获取密码去掉两边的空白
        var password = $.trim($('input[name=password]').val())
        
        if(password.length <= 0)
        {
            alert('请输入密码')
            return false
        }

        //组装数据
        var data = {
            username,
            password
        }
        
        //发送ajax请求
        $.ajax({
            // async: false, //true是默认值(异步请求) false同步请求
            async: true, //true是默认值(异步请求) false同步请求
            url: 'http://localhost/demo/ajax/server.php', //请求的服务器地址
            method: 'POST', //发送请求类型: get post
            data: data,  //发送的数据
            dataType: 'json',  //服务器端返回的数据类型
            success: function(success) //成功请求的回调函数
            {
                //ajax会自动将我们接收的json数据，自动转换为js的对象结构
                console.log('请求成功')

                //服务器返回的结果
                console.log(success)
            },
            error: function(err) //请求失败的回调函数
            {
                console.log('请求失败')
                console.log(err)
            }

        })

    })
</script>